<template>
  <div class="ceshiFu">
    <router-link to="/ceshiZib">
      <b>去Zib</b>
    </router-link>
    <hr />
    <router-link to="/ceshiZia">
      <b>去Zia</b>
    </router-link>
    <hr />

    <h1>Fuuuuuuuuuuuuuuuuuuuuu</h1>
    <!--1、 this.$emit逆向传值 -->
    <Zia @chuanzhi="shouzhi" ref="zia" />
    <!-- 2、ref逆向传值 -->
    <button @click="ref()">点我ref传值</button>
    <!--3、 $set 解决object,defineProerty问题-->
    <br />
    <button @click="getNew()">点我添加新数据</button>
    {{ obj.text }}==={{ obj.age }}
    <br />
    <!-- 4、自定义指令 -->
    <div v-zhiling>自定义指令测试数据</div>
    <!-- 5、mixin -->
    <button @click="funMix()">点我调用mixin的方法</button>
    <br />
    这是mix的数据==={{ textMix }}
    <!-- 6、v-model -->
    <input type="text" v-model="tt" placeholder="这是个输入框" />
    <h1 v-text="tt"></h1>
    <h2>{{ tt }}</h2>
    <h3>v-text</h3>
    <h3 v-html="aa"></h3>
    <h3 v-once>{{ tt }}</h3>
    <h3>{{ tt }}</h3>
    <p>你好啊</p>
    <!-- 7、事件对象$event -->
    <br />
    <button @click="fun($event)">点我触发事件对象</button>
    <!-- 8、修饰符 -->
    <h1>使用修饰符来完成对于指定按键的设置</h1>
    <input type="text" @keydown.space="funkey()" />
    <h1>阻止冒泡</h1>
    <div class="fu" @click="fu()">
      <div class="zi" @click.stop="zi()"></div>
    </div>
    <div class="zi" @click.stop.once="zi()"></div>
  </div>
</template>
<script>
// import {demo} from "@/mixins"
import Zia from "./ceshiZia.vue";
export default {
  data() {
    return {
      obj: {
        text: "你好",
      },
      aa: "<em>这是斜体<em>",
      tt: "aaaaa",
    };
  },
  components: {
    Zia,
  },
  methods: {
    shouzhi(text) {
      console.log(text);
    },
    ref() {
      console.log("ref传值", this.$refs.zia.Zitexta);
    },
    getNew() {
      this.$set(this.obj, "age", 19);
      console.log(this.obj.age);
    },
    fun(xiaoming) {
      console.log(xiaoming.target);
    },
    funkey() {
      console.log("space按下");
    },
    fu() {
      console.log("ffufufufufufufu");
    },
    zi() {
      console.log("zizziziziziziz");
    },
  },
  created() {},
  directives: {
    zhiling: {
      inserted(el) {
        el.style.backgroundColor = "blue";
        el.style.color = "white";
      },
    },
  },
  // mixins:[demo]
  watch: {
   
      immediate: true,
      deep: true,
      tt(newtt, oldtt) {
        console.log(newtt);
        console.log(oldtt);
      },
    },

};
</script>
<style scoped>
b {
  font-size: 26px;
}
input {
  border: 0.01rem solid;
}
p {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.fu {
  background-color: pink;
  width: 100px;
  height:100px;
}
.zi {
  background-color: gray;
  width: 50px;
  height: 50px;
}
</style>
